<template>
  <el-container>
    <el-header class="header_container" style="">
      <h1>疫苗预约系统</h1>
    </el-header>
    <el-page-header style="margin-top: 60px" @back="goBack"></el-page-header>
    <el-main class="login-contain" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      <h2 >修改用户信息</h2>
      <el-form style="margin-right: 30px" :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
            label="姓名"
            prop="name">
          <el-input v-model.number="numberValidateForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="身份证"
            prop="phone"
            :rules="[{ required: true, message: '身份证不能为空'}]"
        >
          <el-input disabled v-model.number="numberValidateForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="手机号"
            prop="telephone"
            :rules="[
      { required: true, message: '手机号不能为空'}
    ]"
        >
          <el-input v-model.number="numberValidateForm.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="numberValidateForm.gender">
            <el-radio  label="1">男</el-radio>
            <el-radio  label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <div style="display: flex;flex-direction: row;justify-content: space-between">
            <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "UserModify",
  data(){
    return{
      numberValidateForm: {
        id:'',
        name: '',
        phone: '',
        telephone: '',
        gender: ''
      }
    }
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios({
            url:'http://localhost:88/api/user/users/userModify',
            method:'post',
            data:{
              id:this.numberValidateForm.id,
              name: this.numberValidateForm.name,
              phone: this.numberValidateForm.phone,
              telephone: this.numberValidateForm.telephone,
              gender: this.numberValidateForm.gender === '1' ? '男' : '女'
            }
          }).then(res => {
            if (res.data.data === '200'){
              this.$message({
                message: '更新成功',
                type: 'success'
              });
              this.$router.replace({path:'/userlogin'})
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    goBack() {
      this.$router.replace({path:'/userMsgMain'})
    }
  },
  mounted() {
    let userMsg = JSON.parse(localStorage.getItem("userManager"))
    this.numberValidateForm.id = userMsg.id
    this.numberValidateForm.gender=userMsg.gender === "男" ? '1':'0'
    this.numberValidateForm.name=userMsg.name
    this.numberValidateForm.phone=userMsg.phone
    this.numberValidateForm.telephone=userMsg.telephone
  }
}
</script>

<style scoped>
.header_container{
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: #67C23A;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  left: 0;
  right: 0;
}
</style>
